<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <script type="text/javascript" src="https://use.fontawesome.com/9dd436f83a.js"></script>
    <!--Import Google Icon Font-->



    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>

    <link rel="stylesheet" type="text/css" href="css/mainpage.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>视界-主界面</title>

</head>

<body>
<nav>
    <div class="nav-wrapper">
        <div class="brand-logo">
            <a href="#"><img src="image/slogan.png"></a>
        </div>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down" id="menu">
            <li><a href="mainpage.html">首页</a></li>
            <li><a href="mywork.html">我的作品</a></li>
            <li><a href="upload.html">我要上传</a></li>
            <li><a href="#" onclick="alert_1()">我的评论</a></li>
            <li><a href="information.html">我的信息</a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
            <li><a href="mainpage.html">首页</a></li>
            <li><a href="mywork.html">我的作品</a></li>
            <li><a href="upload.html">我要上传</a></li>
            <li><a href="#" onclick="alert_1()">我的评论</a></li>
            <li><a href="information.html">我的信息</a></li>
        </ul>
    </div>
</nav>

<div class="row" id="userphoto">
    <div class="col l2 m4 s6 offset-l5 offset-m4 offset-s3">
        <div class="row" id="image">
            <img src="image/profile-picture.jpg" class="responsive-img circle col l10 m10 s12 offset-l1 offset-m1">
        </div>
    </div>
</div>
<div class="row">
    <p class="col l2 m4 s4 offset-l5 offset-m4 offset-s4" id="username"></p>
</div>


<div class="row" id="part">
    <div id="up" class="col l4 m8 s10 offset-l2 offset-m2 offset-s1">
        <!-- ......................................................... -->
        <div class="row delete-1">
            <div class=" col l5 m6 s6 offset-l1" id="up-left">
                <div class="row">
                    <img src="image/work.png" class="responsive-img col l10 m8 s12 offset-l1 offset-m2">
                    <p class="part-p col l12 m12 s12">我的作品</p>
                </div>
            </div>
            <!-- ......................................................... -->
            <div class="row delete-2">
                <div class="col l5 m6 s6 offset-l1" id="up-right">
                    <div class="row">
                        <img src="image/upload.png" class="responsive-img col l10 m8 s12 offset-l1 offset-m2">
                        <p class="part-p col l12 m12 s12">我要上传</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="down" class="col l4 m8 s10 offset-m2 offset-s1">
        <!-- ........................................................... -->
        <div class="row delete-3">
            <div class="col l5 m6 s6 offset-l1" id="down-left">
                <div class="row">
                    <img src="image/comment.png" class="responsive-img col l10 m8 s12 offset-l1 offset-m2">
                    <p class="part-p col l12 m12 s12">我的评论</p>
                </div>
            </div>
            <!-- .......................................................... -->
            <div class="row delete-4">
                <div class="col l5 s6 offset-l1" id="down-right">
                    <div class="row">
                        <img src="image/information.png" class="responsive-img col l10 m8 s12 offset-l1 offset-m2">
                        <p class="part-p col l12 m12 s12">我的信息</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<footer class="hide-on-med-and-down">
    <p><i id="copyright" class="fa fa-copyright" aria-hidden="true"></i>视界团队制作</p>
</footer>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="js/alert.js"></script>
<script type="text/javascript">
    $.ajax({
        url:"/api/user",
        type:"GET",
        success:function (data,status) {
            $("#username").text(data.username);
        }
    })
</script>
</body>

</html>